<!DOCTYPE html>
<html lang="en">
    <head>
        <title>蓝景技术</title>
        <meta charset="UTF-8">
        <link href="../css/reset.css" rel="stylesheet" type="text/css">
        <link href="../css/common.css" rel="stylesheet" type="text/css">
        <link href="../css/swiper-3.4.2.css" rel="stylesheet" type="text/css">
        <link href="../css/bluejScience.css" rel="stylesheet" type="text/css">
        
    </head>
    <body>
    
        <div class="web">
            <!-- 头部部分 -->
            <header>
                <nav>
                    <ul>
                        <li><a href="">HOME</a></li>
                        <li><a href="">蓝景技术</a></li>
                        <li><a href="">蓝景营销</a></li>
                        <li><a href="">蓝景培训</a></li>
                        <li>
                            <div>
                                <span><img src="../images/logo.png" alt="加载失败"></span>
                            </div>
                        </li>
                    </ul>
                </nav>
            </header>
            <section>

                <!-- 顶部部分 -->
                <div class="top">
                    <!-- canvas动画部分 -->
                    <div class="photo"><img src="../images/bluejScience/top_01.jpg" alt="加载失败"></div>
                    <div class="top_detail">
                        <p class="english_detail">web design, ui design, interface design, ux, web, icon </p>
                        <h1 class="chinese_detail">我们是专业的码农团队</h1>
                        <p class="dream">对于技术一直在追求，永不止步！</p>
                        <p class="dream">时刻把握最新的技术走势，为客户提供最专业的服务</p>
                    </div>
                </div>

                <!-- 我们的业务 -->
                <div class="ourBusiness">
                    <p>Our business</p>
                    <h1>我们的业务</h1>
                    <div class="logo">
                        <img src="../images/ologo_03.png" alt="加载失败">
                    </div>
                    <div class="businessTree clearfix">
                        <div>
                            <img src="../images/bluejScience/guanggao.png" alt="加载失败">
                            <span>广告效果类互动</span>
                        </div>
                        <div>
                            <img src="../images/bluejScience/crm.png" alt="加载失败">
                            <span>广告效果类互动</span>
                        </div>
                        <div>
                            <img src="../images/bluejScience/largedata_03.png" alt="加载失败">
                            <span>广告效果类互动</span>
                        </div>
                        <div>
                            <img src="../images/bluejScience/h5_03.png" alt="加载失败">
                            <span>广告效果类互动</span>
                        </div>
                        <div>
                            <img src="../images/bluejScience/miniapp_03.png" alt="加载失败">
                            <span>广告效果类互动</span>
                        </div>
                        <div>
                            <img src="../images/bluejScience/h5game_03.png" alt="加载失败">
                            <span>广告效果类互动</span>
                        </div>
                    </div>
                    <div class="line"></div>
                </div>

                <div class="ourCore clearfix">
                    <p>Core competence</p>
                    <h1>我们的核心竞争力</h1>



                    <div class="coreleft">
                        <!-- 左侧IDE显示部分 -->
                        <div class="ide">
                            <div class="ideHead">
                                <div class="ideLogo">
                                    <span class="logoleft"><img src="../images/bluejScience/idelogo_03.png" alt="加载失败"></span>
                                    <span class="logoright">
                                        <a class="title"></a>
                                    </span>
                                </div>
                            </div>
                            <div class="ideSection clearfix">
                                <div class="sectionleft">
                                    <div class="dotline">
                                        <div class="dot"></div>
                                        <div class="line"></div>
                                        <div class="dot"></div>
                                        <div class="line"></div>
                                        <div class="dot"></div>
                                        <div class="line"></div>
                                    </div>
                                    <div class="lines"></div>
                                </div>
                                <div class="sectionright">
                                    <div class="righttop">
                                        <div class="titlelong"></div>
                                        <div class="titleshort"></div>
                                    </div>
                                    <!-- ide 右边部分的中间一块 -->
                                    <div class="rightcontent clearfix">
                                        <div class="blueblock"></div>
                                        <!-- 条状圆柱体 -->
                                        <div class="cylinder">
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                            <div></div>
                                        </div>
                                        <!-- 水平的条状体 -->
                                        <div class="level"></div>
                                        <div class="level short"></div>
                                    </div>
                                    <!-- ide 右下角部分的圆环效果 -->
                                    <div class="rightbottom">
                                        <div>
                                            <div class="radialProgressBar progress-50">
                                                <div class="overlay"></div>
                                            </div>
                                            <div class="dotline">
                                                <div class="dot"></div>
                                                <div class="line"></div>
                                                <div class="line"></div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="radialProgressBar">
                                                <div class="overlay"></div>
                                            </div>
                                            <div class="dotline">
                                                <div class="dot"></div>
                                                <div class="line"></div>
                                                <div class="line"></div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="radialProgressBar">
                                                <div class="overlay"></div>
                                            </div>
                                            <div class="dotline">
                                                <div class="dot"></div>
                                                <div class="line"></div>
                                                <div class="line"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                    <!-- 右侧的文字 -->
                    <div class="coredetail">
                        <p class="detailtop">前端or后台总有让你舒爽的方案</p>
                        <p class="largedetail">优秀的网站架构设计能力</p>
                        <p>开发维护公司内部前端MVVM类型框架（Vuejs）插件库,自己造的轮子从来不喷！</p>
                        <div class="vue">
                            <span><img src="../images/bluejScience/vue_03.png" alt="加载失败"></span>
                            <span>Vue.js</span>
                        </div>
                    </div>
                    <div class="clear"></div>

                    <!-- 游戏引擎部分 -->
                    <div class="game clearfix">
                        <img class="bigzombie" src="../images/bluejScience/bigzombie_03.png" alt="加载失败">
                        <img class="smallzombie" src="../images/bluejScience/smallzombie_03.png" alt="加载失败">
                        <img class="bigflame" src="../images/bluejScience/bogflame_03.png" alt="加载失败">
                        <img class="smallflame" src="../images/bluejScience/smallflame_03.png" alt="加载失败">
                        <div class="gamedetail">
                            <p class="detailtop">丰富的小游戏开发经验</p>
                            <p class="largedetail">玩转白鹭 / LayaBox等常见游戏引擎</p>
                            <p>搞个骨骼动画带你装X带你飞深入探究3D图形学（WebGL规范）</p>
                            <p>欢迎过来喝茶顺便聊聊设计透视学</p> 
                            <div class="vue">
                                <span><img src="../images/bluejScience/vue_03.png" alt="加载失败"></span>
                                <span>Vue.js</span>
                            </div>
                            <div class="vue">
                                <span><img src="../images/bluejScience/vue_03.png" alt="加载失败"></span>
                                <span>Vue.js</span>
                            </div>
                        </div> 
                    </div>

                    <!-- 人物部分 -->
                    <div class="person">
                        <div class="swiper-container swiper-container-horizontal">
                                <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-2160px, 0px, 0px);">
                                    <div class="swiper-slide">
                                        <div class="carousel">
                                            <img src="../images/bluejScience/baoge_03.png" alt="加载失败" class="imgsize">
                                            <div class="text">
                                                <p>何瑞宝-技术经理</p>
                                                <p class="textcontent">十年技术开发经验磨砺出的一把利剑,精通PHP、Javascript、XML、HTML5、CSS3、Python、Java、C#，擅长MySQL和SQLServer数据库与设计，主导客户系统框架架构以及服务器架设，大数据处理分析，一直服务于东风日产，南方航空等注重CRM系统开发的客户，同时精于H5游戏以及APP开发</p>
                                            </div>
                                        </div>
                                        <div class="carouselright">
                                            <div>
                                                <p class="detailtop">看多了前端小鲜肉，突然感觉后台大叔也挺有韵味</p>
                                                <p class="largedetail">资深工程师10年PHP开发经验</p>
                                                <p>一个具有猎奇心，创造性，逗逼骚气但绝不咸鱼的团队(‧_‧？)</p>
                                                <div class="vue">
                                                    <span>10<b>年</b></span>
                                                    <span>PHP/JS</span>
                                                </div>
                                            </div>                                            
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                            <div class="carousel">
                                                    <img src="../images/bluejScience/baoge_03.png" alt="加载失败" class="imgsize">
                                                    <div class="text">
                                                        <p>何瑞宝-技术经理</p>
                                                        <p class="textcontent">十年技术开发经验磨砺出的一把利剑,精通PHP、Javascript、XML、HTML5、CSS3、Python、Java、C#，擅长MySQL和SQLServer数据库与设计，主导客户系统框架架构以及服务器架设，大数据处理分析，一直服务于东风日产，南方航空等注重CRM系统开发的客户，同时精于H5游戏以及APP开发</p>
                                                    </div>
                                                </div>
                                                <div class="carouselright">
                                                    <div>
                                                        <p class="detailtop">看多了前端小鲜肉，突然感觉后台大叔也挺有韵味</p>
                                                        <p class="largedetail">资深工程师10年PHP开发经验</p>
                                                        <p>一个具有猎奇心，创造性，逗逼骚气但绝不咸鱼的团队(‧_‧？)</p>
                                                        <div class="vue">
                                                            <span>10<b>年</b></span>
                                                            <span>PHP/JS</span>
                                                        </div>
                                                    </div>                                            
                                                </div>
                                    </div>
                                    <div class="swiper-slide">
                                            <div class="carousel">
                                                    <img src="../images/bluejScience/baoge_03.png" alt="加载失败" class="imgsize">
                                                    <div class="text">
                                                        <p>何瑞宝-技术经理</p>
                                                        <p class="textcontent">十年技术开发经验磨砺出的一把利剑,精通PHP、Javascript、XML、HTML5、CSS3、Python、Java、C#，擅长MySQL和SQLServer数据库与设计，主导客户系统框架架构以及服务器架设，大数据处理分析，一直服务于东风日产，南方航空等注重CRM系统开发的客户，同时精于H5游戏以及APP开发</p>
                                                    </div>
                                                </div>
                                                <div class="carouselright">
                                                    <div>
                                                        <p class="detailtop">看多了前端小鲜肉，突然感觉后台大叔也挺有韵味</p>
                                                        <p class="largedetail">资深工程师10年PHP开发经验</p>
                                                        <p>一个具有猎奇心，创造性，逗逼骚气但绝不咸鱼的团队(‧_‧？)</p>
                                                        <div class="vue">
                                                            <span>10<b>年</b></span>
                                                            <span>PHP/JS</span>
                                                        </div>
                                                    </div>                                            
                                                </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="carousel">
                                            <img src="../images/bluejScience/baoge_03.png" alt="加载失败" class="imgsize">
                                            <div class="text">
                                                <p>何瑞宝-技术经理</p>
                                                <p class="textcontent">十年技术开发经验磨砺出的一把利剑,精通PHP、Javascript、XML、HTML5、CSS3、Python、Java、C#，擅长MySQL和SQLServer数据库与设计，主导客户系统框架架构以及服务器架设，大数据处理分析，一直服务于东风日产，南方航空等注重CRM系统开发的客户，同时精于H5游戏以及APP开发</p>
                                            </div>
                                        </div>
                                        <div class="carouselright">
                                            <div>
                                                <p class="detailtop">看多了前端小鲜肉，突然感觉后台大叔也挺有韵味</p>
                                                <p class="largedetail">资深工程师10年PHP开发经验</p>
                                                <p>一个具有猎奇心，创造性，逗逼骚气但绝不咸鱼的团队(‧_‧？)</p>
                                                <div class="vue">
                                                    <span>10<b>年</b></span>
                                                    <span>PHP/JS</span>
                                                </div>
                                            </div>                                            
                                        </div>
                                    </div>
                                </div>
                                <!-- Add Pagination -->
                                <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>
                            </div>


                            
                    </div>


                    <!-- 我们的能力 -->
                    <div class="ourstrength">
                        <div class="line">
                            <p>OUR STRENGTH</p>
                            <h1>我们的实力</h1>
                        </div>
                        <div class="strength">
                            
                            <div class="swiper-container swiper-container-horizontal">
                                <div class="swiper-wrapper" style="transform: translate3d(-6660px, 0px, 0px); transition-duration: 0ms;"><div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="9" style="width: 1080px; margin-right: 30px;">Slide 10</div>
                                    <div class="swiper-slide" data-swiper-slide-index="0">
                                        <div class="product_detail">
                                            <p>项目</p>
                                            <p>如果我是梵高</p>
                                            <p>项目介绍</p>
                                            <p>开发维护公司内部前端MVVM类型框架（Vuejs）自己造的轮子从来不喷！</p>
                                            <div class="photo">
                                                <img src="" alt="">
                                            </div>
                                        </div>
                                        <div class="product">
                                            <img src="" alt="">
                                        </div>
                                    </div>
                                    <div class="swiper-slide" data-swiper-slide-index="1">
                                        
                                    </div>
                                    <div class="swiper-slide" data-swiper-slide-index="2">
                                        
                                    </div>
                                <!-- Add Pagination --> 
                                <!-- Add Arrows -->
                                <div class="swiper-button-next"></div>
                                <div class="swiper-button-prev"></div>
                            </div>
                            
                        </div>
                        
                        
                    </div>

                    <!-- 合作企业 -->
                    <div class="cooperative">
                        <div class="clearfix">
                            <div>
                                <span>合作企业</span>
                                <img src="../images/bluejScience/aliyun_03.jpg" alt="加载失败">    
                            </div>
                            <div>
                                <span>合作企业</span>
                                <img src="../images/bluejScience/aliyun_03.jpg" alt="加载失败">    
                            </div>
                            <div>
                                <span>合作企业</span>
                                <img src="../images/bluejScience/aliyun_03.jpg" alt="加载失败">    
                            </div>
                            <div>
                                <span>合作企业</span>
                                <img src="../images/bluejScience/aliyun_03.jpg" alt="加载失败">    
                            </div>
                            <div>
                                <span>合作企业</span>
                                <img src="../images/bluejScience/aliyun_03.jpg" alt="加载失败">    
                            </div>
                            <div>
                                <span>合作企业</span>
                                <img src="../images/bluejScience/aliyun_03.jpg" alt="加载失败">    
                            </div>
                        </div>
                        
                    </div>

                    
                    





                </div>



            </section>
        </div>
        <script type="text/javascript" src="../js/swiper-3.4.2.min.js"></script>
        <script>
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                paginationClickable: true,
                autoplay: 2000,
                loop: true,
                speed:600

            });
        /******初始化swiper的transform的变化*******/    
            document.querySelector(".person .swiper-wrapper").style.transform = "translate3d(0,0,0)";
            
        </script>
    </body>
</html>